<template>

  <el-aside style="background-color: rgb(238, 241, 246);width: auto;height: 100%">

    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
      :collapse="isCollapse" background-color="#416082" text-color="white" active-text-color="#40b883" router>
      <div style="height: 60px;line-height: 60px"><img alt="Vue logo" src="@/assets/logo.png" width="34px"
                                                       style="position: relative;top: 14px"> <font
          v-if="!isCollapse" style="color: white">Yummy后台管理</font></div>
        <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item
              :index="subMenu.url+''"
              v-for="subMenu in item.children"
              :key="subMenu.id"
          >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ subMenu.name }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
<!--      <el-menu-item index="/home">-->
<!--          <i class="el-icon-s-home"></i>-->
<!--          <span slot="title">首&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;页</span>-->
<!--      </el-menu-item>-->
<!--      <el-submenu index="1">-->
<!--        <template slot="title">-->
<!--            <i class="el-icon-s-data"></i>-->
<!--            <span slot="title">店铺管理</span>-->
<!--        </template>-->
<!--        <el-menu-item index="/registerStore">-->
<!--          <i class="el-icon-s-check" style="padding-left: 20px"></i>-->
<!--          <span slot="title" style="color: lightcyan">店铺注册</span>-->
<!--        </el-menu-item>-->
<!--        <el-menu-item index="/managerUser">-->
<!--          <i class="el-icon-s-custom" style="padding-left: 20px"></i>-->
<!--          <span slot="title" style="color: lightcyan">店员信息</span>-->
<!--        </el-menu-item>-->
<!--      </el-submenu>-->
    </el-menu>
  </el-aside>
<!--  <el-main>-->
<!--    &lt;!&ndash;显示菜单路由 对用的 组件 &ndash;&gt;-->
<!--    <router-view v-if="isRouterAlive" />-->
<!--  </el-main>-->

</template>

<script>
export default {
  name: "AsideView",
  data() {
    return {
      menuList: [],
      isRouterAlive: true,
      username:'',
    }
  },
  props: ["isCollapse"],
  methods: {
    handleOpen(key, keyPath) {
      console.log("打开")
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    backHome(){
      this.$router.push({
        path:'/Home'
      })
    },
    // reload() {
    //   this.isRouterAlive = false;
    //   this.$nextTick(function() {
    //     this.isRouterAlive = true;
    //   });
    // },
    // toggleClapse() {
    //   this.isCollapse = !this.isCollapse;
    // },
    //初始化加载菜单  先查询所有菜单
    loadMenus() {
      let id = localStorage.getItem("id");

      let url = "/permission/showMenuByManager/"+id ;
      this.$axios.get(url)
          .then(res=>{
            if (res.data.code == 200){
              console.log(res);
              this.menuList = res.data.data;
            }else {
              this.$message({
                type:'error',
                message:res.data.msg,
                duration:1000
              })
            }
          })
    },
  },
  created() {
    this.loadMenus();
  }
}
</script>

<style scoped>
.el-menu--collapse {
  height: 100%;
  background: cadetblue;
}
</style>
